Netlify CMSを導入した
/icons/hr.icon
ターミナル.app でちまちまと作成するのが嫌ってほどではないんだけど、とにかく少しでも楽がしたかった。
言ってしまえば、↑このページにしたがってやればできるんだけど、自分のためにメモ。
やったこと:
ルートに static > admin フォルダを作る
admin フォルダに index.html と config.yml を置く
index.html の中身:
code:index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
</head>
<body>
<!-- Include the script that builds the page and powers Netlify CMS -->
</body>
</html>
<head> の次の行については後述
config.yml の中身:
yuyuko.iconは要不要の判断もつかんし、下手に書き換えて動かなくなったら嫌なので、ほぼそのまままるっともってきた
# This line should *not* be indented にはちゃんと従いました！（えらい💯）
code:config.yml
backend:
name: git-gateway
branch: master # Branch to update (optional; defaults to master)
# This line should *not* be indented
publish_mode: editorial_workflow
# This line should *not* be indented
media_folder: "images/uploads" # Media files will be stored in the repo under images/uploads
# These lines should *not* be indented
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads
collections:
- name: "blog" # Used in routes, e.g., /admin/collections/blog
label: "Blog" # Used in the UI
folder: "_posts/blog" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Body", name: "body", widget: "markdown"}
Netlify Identity Widgetのためのコードを足す
code:これ
足すべき箇所:
1. さっき作った static > admin > index.html の <head> の中
2. サイトのインデックスページの <head> の中
Netlifyの該当サイトの Settings > Identity > Services > Enable Git Gateway の、 Eneble をクリック なんやかんやする
サーバー立てて hogehoge.netlify.com/admin にアクセス
Netlify CMSのログイン画面が出てくる
Log in しか選べず一生サインアップできない
ホア〜〜〜？？？？？ となる
なんかいろいろやってたら Sign up が現れたけど今度はエラーが出る
There was an error verifying your account. Please try again or contact an administrator.
なんかいろいろやってたらサインアップできた
キャッシュが残ってたか、しびれを切らしてサイト側の Identity > Invite members から同じメアドをinviteしてたのがよくなかったか
ログインすると管理者画面が出てくる
yuyuko.iconやった〜！
最後に、Netlifyの該当サイトの Settings > Identity > Registration を Invite only にしておく
「書きかけ」と「書き終えて公開待ち」を区別できるのは便利そう。
公式のTemplateからNetlify CMSを利用開始した場合は、CMSバージョンが低くEditorial Workflowを利用できない場合があるようです。その場合は、CMSバージョンをアップデートします。方法はいくつかありますが、CDNを利用するのが手軽です。
yuyuko.iconふむふむ
今回はひとまずブログだけ投稿できるようにした。
どこをどうすればいいのかはなんとなく分かったので、必要になったら他のコンテンツも管理画面から投稿できるようにしよう。
yuyuko.iconただし、Netlify CMSで記事を作成するとローカルとの同期にちょっと気を遣わないといけない。 どうやるのが総合的にいちばん楽なのかは使いながら考える。